<template>
  <div id="car-operate">
    <div id="car-operate-title">
      <div class="car-operate-title">
        <img src="static/img/yellow-con.png" class="car-operate-img1">
        <img src="static/img/yellow-con.png" class="car-operate-img2">
        <img src="static/img/yellow-con.png" class="car-operate-img3">
        <img src="static/img/yellow-con.png" class="car-operate-img4">
        <img src="static/img/yellow-con.png" class="car-operate-img5">
        <img src="static/img/yellow-con.png" class="car-operate-img6">
        <img src="static/img/yellow-con.png" class="car-operate-img7">
        <img src="static/img/yellow-con.png" class="car-operate-img8">
        <img src="static/img/blue-con.png" class="car-operate-img9">
        <img src="static/img/blue-con.png" class="car-operate-img10">
        <img src="static/img/blue-con.png" class="car-operate-img11">
        <img src="static/img/blue-con.png" class="car-operate-img12">
        <span>实时车辆运营状况</span>
      </div>
    </div>
    <div class="car-operate-button">
      <div class="car-operate-chuzu">
        <img src="static/img/chuzuche.png" class="chuzu">
        <div class="chuzu-zaike">载客</div>
        <div class="car-sum">车辆总量(辆)</div>
        <div class="chuzu-kongzai">空载</div>
        <div class="chuzu-znum">{{znum1}}%</div>
        <div class="chuzu-knum">{{knum1}}%</div>
        <div class="chuzu-all-num">{{zcount1 + kcount1}}</div>
        <div class="chuzu-line">
          <div class="pink-line1"></div>
          <div class="blue-line1"></div>
        </div>
      </div>
      <div class= "car-operate-wangyue">
        <img src="static/img/wangyue.png" class="wangyue">
        <div class="chuzu-zaike">载客</div>
        <div class="car-sum">车辆总量(辆)</div>
        <div class="chuzu-kongzai">空载</div>
        <div class="chuzu-znum">{{znum2}}%</div>
        <div class="chuzu-knum">{{knum2}}%</div>
        <div class="chuzu-all-num">{{zcount2 + kcount2}}</div>
        <div class="chuzu-line">
          <div class="pink-line2"></div>
          <div class="blue-line2"></div>
        </div>
      </div>
      <div class="car-operate-gongjiao">
        <img src="static/img/gongjiao.png" class="gongjiao">
        <div class="chuzu-zaike">载客</div>
        <div class="car-sum">车辆总量(辆)</div>
        <div class="chuzu-kongzai">空载</div>
        <div class="chuzu-znum">{{znum3}}%</div>
        <div class="chuzu-knum">{{knum3}}%</div>
        <div class="chuzu-all-num">{{zcount3 + kcount3}}</div>
        <div class="chuzu-line">
          <div class="pink-line3"></div>
          <div class="blue-line3"></div>
        </div>
      </div>
      <div class="car-operate-huoche">
        <img src="static/img/huoche.png" class="huoche">
        <div class="chuzu-zaike">载客</div>
        <div class="car-sum">车辆总量(辆)</div>
        <div class="chuzu-kongzai">空载</div>
        <div class="chuzu-znum">{{znum4}}%</div>
        <div class="chuzu-knum">{{knum4}}%</div>
        <div class="chuzu-all-num">{{zcount4 + kcount4}}</div>
        <div class="chuzu-line">
          <div class="pink-line4"></div>
          <div class="blue-line4"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'car-operate',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        timeList : 1513645200000,
        zcount1 : 100,
        kcount1 : 100,
        zcount2 : 100,
        kcount2 : 100,
        zcount3 : 100,
        kcount3 : 100,
        zcount4 : 100,
        kcount4 : 100,
        znum1 : 10,
        knum1 : 20,
        znum2 : 10,
        knum2 : 20,
        znum3 : 10,
        knum3 : 20,
        znum4 : 10,
        knum4 : 20,
      }
    },
    mounted() {
      this.getOperatestate();
      this.changeTimeList();
    },
    methods: {
      getOperatestate: function () {
        const car_zcount = [];
        const car_kcount = [];
        $.ajax({
          type : 'get',
          async :true,
          url: 'http://203.81.245.37:2420/platformservice/right/' +this.timeList ,
          data : {},
          dataType: 'json',
          success : (result) => {
            if (result) {
              let car_operatestate = result.operatestate;
              for (var i=0;i<car_operatestate.length;i++) {
                car_zcount.push(car_operatestate[i].zcount)
              }
              for (var i=0;i<car_operatestate.length;i++) {
                car_kcount.push(car_operatestate[i].kcount)
              }
              this.zcount1 = car_zcount[4];
              this.kcount1 = car_kcount[4];
              this.zcount2 = car_zcount[3];
              this.kcount2 = car_zcount[3];
              this.zcount3 = car_zcount[2];
              this.kcount3 = car_zcount[2];
              this.zcount4 = car_zcount[0];
              this.kcount4 = car_zcount[0];
              const nozomi1 = this.zcount1 + this.kcount1;
              const nozomi2 = this.zcount2 + this.kcount2;
              const nozomi3 = this.zcount3 + this.kcount3;
              const nozomi4 = this.zcount4 + this.kcount4;
              this.znum1 = (this.zcount1/nozomi1).toFixed(2)*100;
              this.knum1 = (this.kcount1/nozomi1).toFixed(2)*100;
              this.znum2 = (this.zcount2/nozomi2).toFixed(2)*100;
              this.knum2 = (this.kcount2/nozomi2).toFixed(2)*100;
              this.znum3 = (this.zcount3/nozomi3).toFixed(2)*100;
              this.knum3 = (this.kcount3/nozomi3).toFixed(2)*100;
              this.znum4 = (this.zcount4/nozomi4).toFixed(2)*100;
              this.knum4 = (this.kcount4/nozomi4).toFixed(2)*100;
              const calculate1 = this.zcount1/nozomi1*160;
              const calculate2 = this.kcount1/nozomi1*160;
              const calculate3 = this.zcount2/nozomi2*160;
              const calculate4 = this.kcount2/nozomi2*160;
              const calculate5 = this.zcount3/nozomi3*160;
              const calculate6 = this.kcount3/nozomi3*160;
              const calculate7 = this.zcount4/nozomi4*160;
              const calculate8 = this.kcount4/nozomi4*160;
              $(".pink-line1").css("width",calculate1+"px");
              $(".blue-line1").css("width",calculate2+"px");
              $(".pink-line2").css("width",calculate3+"px");
              $(".blue-line2").css("width",calculate4+"px");
              $(".pink-line3").css("width",calculate5+"px");
              $(".blue-line3").css("width",calculate6+"px");
              $(".pink-line4").css("width",calculate7+"px");
              $(".blue-line4").css("width",calculate8+"px");
            }
          }
        })
      },
      changeTimeList: function () {
        var timeList = [1514422800000,1514336400000,1514250000000,1514163600000,1514077200000,1513990800000,1513904400000,1513818000000,1513731600000,1513645200000];
        var j = 0;
        setInterval( () => {
          this.timeList = timeList[j];
//          console.log(timeList[j]);
          if (j < timeList.length-1){
            j+=1;
          }else {
            j = 0;
          }
          this.getOperatestate();
        },60000)
      }
    }
  }
</script>

<style>
  #car-operate {
    height: 260px;
    width: 440px;
    position: relative;
  }
  #car-operate-title {
    height: 40px;
    width: 438px;
    background: rgba(7, 34, 31, 0.8);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(32, 221, 201, 0.8);
    border-image: initial;
  }
  .car-operate-title {
    height: 30px;
    width: 428px;
    position: absolute;
    top: 6px;
    left: 6px;
    font-family: MicrosoftYaHeiUI;
    text-align: left;
    text-indent: 4px;
    font-size: 18px;
    line-height: 30px;
    color: rgb(239, 187, 66);
    letter-spacing: -0.45px;
    background: rgba(0, 158, 158, 0.2);
  }
  .car-operate-button {
    height: 277px;
    width: 438px;
    background: rgba(7,34,31,0.80);
    border: 1px solid rgba(32,221,201,0.80);
  }
  .car-operate-img1 {
    position: absolute;
    top: -7px;
    left: -7px;
    z-index: 3;
  }
  .car-operate-img2 {
    position: absolute;
    top: -7px;
    left: 429px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .car-operate-img3 {
    position: absolute;
    top: 32px;
    left: 429px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .car-operate-img4 {
    position: absolute;
    top: 32px;
    left: -7px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .car-operate-img5 {
    position: absolute;
    top: 35px;
    left: -7px;
    z-index: 3;
  }
  .car-operate-img6 {
    position: absolute;
    top: 35px;
    left: 429px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .car-operate-img7 {
    position: absolute;
    top: 310px;
    left: 429px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .car-operate-img8 {
    position: absolute;
    top: 310px;
    left: -7px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .car-operate-img9 {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 3;
  }
  .car-operate-img10 {
    position: absolute;
    top: -1px;
    left: 425px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .car-operate-img11 {
    position: absolute;
    top: 27px;
    left: 425px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .car-operate-img12 {
    position: absolute;
    top: 27px;
    left: -1px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .car-operate-chuzu {
    height: 64px;
    width: 424px;
    position: absolute;
    top: 45px;
    left: 7px;
    border-radius: 10px;
    border: 1px solid #1BB7A7;
  }
  .chuzu {
    position: absolute;
    top: 2px;
    left: 2px;
  }
  .car-operate-wangyue {
    height: 64px;
    width: 424px;
    position: absolute;
    top: 114px;
    left: 7px;
    border-radius: 10px;
    border: 1px solid #1BB7A7;
  }
  .wangyue {
    position: absolute;
    top: 2px;
    left: 2px;
  }
  .car-operate-gongjiao {
    height: 64px;
    width: 424px;
    position: absolute;
    top: 183px;
    left: 7px;
    border-radius: 10px;
    border: 1px solid #1BB7A7;
  }
  .gongjiao {
    position: absolute;
    top: 2px;
    left: 2px;
  }
  .car-operate-huoche {
    height: 64px;
    width: 424px;
    position: absolute;
    top: 252px;
    left: 7px;
    border-radius: 10px;
    border: 1px solid #1BB7A7;
  }
  .huoche {
    position: absolute;
    top: 2px;
    left: 2px;
  }
  .chuzu-zaike {
    position: absolute;
    top: 2px;
    left: 67px;
    height: 15px;
    width: 24px;
    font-family: MicrosoftYaHeiUI;
    font-size: 12px;
    color: #EFBB42;
    letter-spacing: -0.3px;
  }
  .car-sum {
    position: absolute;
    top: 2px;
    left: 198px;
    height: 15px;
    width: 66px;
    font-family: MicrosoftYaHeiUI;
    font-size: 12px;
    color: #EFBB42;
    letter-spacing: -0.3px;
  }
  .chuzu-kongzai {
    position: absolute;
    top: 2px;
    left: 384px;
    height: 15px;
    width: 24px;
    font-family: MicrosoftYaHeiUI;
    font-size: 12px;
    color: #EFBB42;
    letter-spacing: -0.3px;
  }
  .chuzu-znum {
    height: 38px;
    width: 65px;
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 30px;
    color: #7AE9E5;
    letter-spacing: 0;
    position: absolute;
    top: 22px;
    left: 64px;
  }
  .chuzu-knum {
    height: 38px;
    width: 65px;
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 30px;
    color: #7AE9E5;
    letter-spacing: 0;
    position: absolute;
    top: 22px;
    left: 349px;
  }
  .chuzu-all-num {
    position: absolute;
    top: 22px;
    left: 196px;
    height: 25px;
    width: 70px;
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 20px;
    color: #FFFFFF;
    letter-spacing: 0;
  }
  .chuzu-line {
    height: 2px;
    width: 160px;
    /*background: #D57676;*/
    position: absolute;
    top: 52px;
    left: 151px;
  }
  .pink-line1 {
    height: 2px;
    float:left;
    width: 20px;
    background: #D57676;
    position: absolute;
  }
  .blue-line1 {
    height: 2px;
    float:right;
    width: 140px;
    background: #7AE9E5;
  }
  .pink-line2 {
    height: 2px;
    float:left;
    width: 20px;
    background: #D57676;
    position: absolute;
  }
  .blue-line2 {
    height: 2px;
    float:right;
    width: 140px;
    background: #7AE9E5;
  }
  .pink-line3 {
    height: 2px;
    float:left;
    width: 20px;
    background: #D57676;
    position: absolute;
  }
  .blue-line3 {
    height: 2px;
    float:right;
    width: 140px;
    background: #7AE9E5;
  }
  .pink-line4 {
    height: 2px;
    float:left;
    width: 20px;
    background: #D57676;
    position: absolute;
  }
  .blue-line4 {
    height: 2px;
    float:right;
    width: 140px;
    background: #7AE9E5;
  }
</style>
